$(function () {
    var num = 0;            //循环变量,定义图片页数
    var delay = 2000;  //播放时间间隔
    var length = 5;    //图片张数
    function playImage(n) {
        $('.play .imgList li').removeClass('current').siblings().eq(n).addClass('current');
        $('.play-list span').removeClass('current').siblings().eq(n).addClass('current');
    }
    function scrollPicsPlay() {
        num++;
        if (num >= length) {
            num = 0;
        }
        playImage(num);
    }
    //3..设置图片播放时间间隔
    var timeSpan = setInterval(scrollPicsPlay, delay);
    //设置属性
    //4.1.鼠标悬浮 不轮播
    $('.play').on('mouseenter', function () {
        clearInterval(timeSpan);
    }).on('mouseleave', function () {
        timeSpan = setInterval(scrollPicsPlay, delay)
    });
    //4.2给圆点按钮绑定事件
    $('.play-list span').on('click', function () {
        num = $(this).index();
        playImage(num);
    });
    //4.3.右边图片绑定事件
    $('.slide-right').on('click', function () {
        num++;
        if (num >= length) {
            num = 0;
        }
        playImage(num)
    });
    //4.4.左边图片绑定事件
    $('.slide-left').on('click', function () {
        num--;
        if (num < 0) { num = length - 1 } playImage(num)
    });
});

//请求手机渲染页面
var goodphone = null
$.ajax({
    url: '../php/phone.php',
    type: 'post',
    dataType: 'json',
    success: function (res) {
        goodphone = res
        let str = ''
        goodphone.forEach(item => {
            str += `<li class="brick-item brick-item-m brick-item-m-2">
            <a href="./datali.html?id=${item.id}">
                <div class="figure figure-img">
                    <img src="${item.s_img}"
                        alt="">

                </div>
                <h3 class="title">${item.good_name}</h3>
                <p class="desc">${item.describe}</p>
                <p class="price">
                    <span>${item.price}</span>元<span>起</span>
                </p>
            </a>
        </li>`
        })
        $('.phone>ul').append($(str))
    }
})
//请求家电渲染页面
var goodhome = null
$.ajax({
    url: '../php/home.php',
    type: 'post',
    dataType: 'json',
    success: function (res) {
        goodhome = res
        let str = ''
        goodhome.forEach(item => {
            str += ` <div>
            <li class="brick-item brick-item-m brick-item-m-2">
                <a href="./datali.html?id=${item.id}">
                    <div class="figure figure-img">
                        <img src="${item.s_img}"
                            alt="">
                    </div>
                    <h3 class="title">${item.goods_name}</h3>
                    <p class="desc">${item.describe}</p>
                    <p class="price">
                        <span>${item.price}</span>元
                    </p>
                </a>
            </li>
        </div>`
        })
        $('.home ul').prepend($(str))
    }
})

//请求智能系列渲染页面
var goodsmart = null
$.ajax({
    url: '../php/smart.php',
    type: 'post',
    dataType: 'json',
    success: function (res) {
        goodsmart = res
        let str = ''
        goodsmart.forEach(item => {
            str += ` <div>
            <li class="brick-item brick-item-m brick-item-m-2">
                <a href="./datali.html?id=${item.id}">
                    <div class="figure figure-img">
                        <img src="${item.s_img}"
                            alt="">
                    </div>
                    <h3 class="title">${item.goods_name}</h3>
                    <p class="desc">${item.describe}</p>
                    <p class="price">
                        <span>${item.price}</span>元
                    </p>
                </a>
            </li>
        </div>`
        })
        $('.smart ul').prepend($(str))
    }
})
//请求搭配渲染页面
var goodcollocation = null
$.ajax({
    url: '../php/collocation.php',
    type: 'post',
    dataType: 'json',
    success: function (res) {
        goodcollocation = res
        let str = ''
        goodcollocation.forEach(item => {
            str += ` <div>
            <li class="brick-item brick-item-m brick-item-m-2">
                <a href="./datali.html?id=${item.id}">
                    <div class="figure figure-img">
                        <img src="${item.s_img}"
                            alt="">
                    </div>
                    <h3 class="title">${item.goods_name}</h3>
                    <p class="desc">${item.describe}</p>
                    <p class="price">
                        <span>${item.price}</span>元
                    </p>
                </a>
            </li>
        </div>`

        })
        $('.collocation ul').prepend($(str))
    }
})